<template lang="pug">
  .clearfix
    Modal.ss-add-modal-lzw.lzw-style-modal(
      width="1000"
      v-model="isShowDetailModal"
      title="详情"
      class-name="vertical-center-modal"
      @on-cancel="cancel"
      fullscreen
    )
      .search-form.mb-10.pl-10.pr-10
        Row(type="flex" justify="start")
          Col.pr-20.mb-15(span="7")
            span.label-txt.w110 客户名称：
            Input(v-model="accountName" placeholder="请输入" clearable)
          Col.pr-20.mb-15(span="7")
            span.label-txt.w110 菜单栏：
            Input(v-model="menuName" placeholder="请输入" clearable)
            Button.ml-10(type="info" @click="searchBtn") 查询
      .pl-20.pr-20.bg-white
        Table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData")
          .clearfix.pl-20.pr-20(slot="footer")
            Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
      div(slot="footer")
        Button(@click="cancel") 关闭

</template>

<script>
import { SysDataPermissionApi } from '@/api/SysDataPermission.api.js'
import { constants } from 'fs';
export default {
  name: '',

  props: {
  },

  data () {
    return {
      isShowDetailModal: false,
      id: '',
      loading: false,
      PageIndex: 1,
      PageSize: 10,
      codeTotal: 0,
      listData: [],
      menuName: '',
      customerName: '',
      accountName: '',
      thead: [
        {
          title: '账号名称',
          minWidth: 100,
          key: 'customerName',
          render: (h, params) => {
            return h('span', this.customerName)
          }
        },
        {
          title: '菜单栏',
          minWidth: 100,
          key: 'menuName'
        },
        {
          title: '数据权限',
          minWidth: 100,
          key: 'actionName'
        },
        {
          title: '客户名称',
          minWidth: 100,
          key: 'customerName',
          ellipsis: true,
          render: (h, params) => {
            let texts = params.row.customerName
            if (params.row.customerName != null) {
              if (params.row.customerName.length > 16) {
                texts = params.row.customerName.slice(0, 16) + '...' // 进行数字截取
              } else {
                texts = params.row.customerName
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.customerName)
              ])
            ])
          }
        }
      ],
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    ok () {
    },

    cancel () {
      this.isShowDetailModal = false
    },
    
    getList(){
      SysDataPermissionApi.getUserPermissionList({
        "CustomerName": this.accountName,
        "MenuName": this.menuName,
        "Id": this.id,
        "PageIndex": this.PageIndex,
        "PageSize": this.PageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 查询
    searchBtn () {
      this.PageIndex = 1
      this.getList()
    },

    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },

    onpageSizeChange (val) {
      this.PageSize = val
      this.getList()
    }
  }
}
</script>

<style lang="less" scope>
  .ss-add-modal-lzw{
    .ivu-modal-wrap{
      top:10%;
      bottom: 10%;
      left: 10%;
      right: 10%;
    }
  }
</style>
